<template>
  <div class="news-menu">
    <ul class="menu-wrap">
      <li class="menu-item" @click="goBack">
        <i class="icon iconfont icon-back"></i>
      </li>
      <li class="menu-item" @click="goNext">
        <i class="icon iconfont icon-moreunfold"></i>
      </li>
      <li class="menu-item" @click="thumbUp" :class="{'dianzan-active': isDianzan}">
        <i class="icon iconfont icon-dianzan"></i>
        <span class="dianzan-number">{{popularity}}</span>
      </li>
      <li class="menu-item" @click="showMenu">
        <i class="icon iconfont icon-fenxiang"></i>
      </li>
      <li class="menu-item" @click="showComment">
        <i class="icon iconfont icon-pinglun"></i>
        <span class="comments-number">{{commentsCount}}</span>
      </li>
    </ul>
    <div v-transfer-dom>
      <popup v-model="showPopup">
        <div class="popup2">
          <share :id="id" @cancel="closePop"></share>
        </div>
      </popup>
    </div>
    <toast v-model="showToast" type="warn">已经是最后一篇文章了！</toast>
  </div>
</template>
<script>
  import {
    TransferDom,
    Popup
  } from "vux";
  import Share from "components/share/share";
  import axios from "axios"
  import {
    Toast
  } from 'vux'
  import {
    mapGetters
  } from 'vuex'
  export default {
    directives: {
      TransferDom
    },
    props: ["id"],
    data() {
      return {
        showPopup: false,
        commentsCount: 0, // 评论数
        commentsData: null, // 评论数据
        popularity: 0, // 点赞数
        showToast: false,
        isDianzan: false // 是否点赞
      };
    },
    created() {
      // 如果没有id，则返回上一页
      if (!this.id) {
        this.$router.go(-1);
        return false;
      }
      this.getData();
    },
    computed: {
      ...mapGetters([
        "storiesId",
        "currentThemeId"
      ])
    },
    watch: {
      id: "getData"
    },
    methods: {
      // 获取新闻详情页底部菜单栏的信息
      getData() {
        axios.get('api/story-extra/' + this.id)
          .then(res => {
            this.commentsCount = res.data.comments;
            this.commentsData = res.data;
            this.popularity = res.data.popularity;
            // this.$store.state.long_comments = res.data.long_comments;
            // this.$store.state.popularity = res.data.popularity;
            // this.$store.state.short_comments = res.data.short_comments;
            // this.$store.state.comments = res.data.comments;
          })
          .catch(error => {
            console.log(error);
          });
      },
      // 返回上一页
      goBack() {
        this.$router.go(-1);
      },
      goNext() {
        // 加载下一篇文章        
        let currentIndex = this.storiesId.indexOf(parseInt(this.id));
        let len = this.storiesId.length;
        if (currentIndex < len - 1) {
          // 直接用replace，避免网history里面添加路由记录，防止返回错误
          this.$router.replace({
            name: "newDetail",
            params: {
              id: this.storiesId[currentIndex + 1]
            }
          });
        } else {
          this.showToast = true;
        }
      },
      thumbUp() {
        if (this.isDianzan) {
          this.popularity--;
        } else {
          this.popularity++;
        }
        this.isDianzan = !this.isDianzan;
      }, // 点赞
      showMenu() {
        this.showPopup = true;
      }, // 分享
      showComment() {
        this.$router.push({
          name: 'comment',
          params: {
            id: this.id,
            count: this.commentsCount
          }
        })
      }, // 评论界面
      closePop() {
        this.showPopup = false;
      }
    },
    components: {
      Popup,
      Share,
      Toast
    }
  };

</script>

<style lang="less" scoped>
  .vux-popup-dialog {
    background-color: #e9e9e9 !important;
  }

  .news-menu {
    position: fixed;
    width: 100%;
    height: 44px;
    left: 0;
    bottom: 0;
    .menu-wrap {
      display: flex;
      width: 100%;
      height: 44px;
      line-height: 44px;
      padding: 0;
      text-align: center;
      border-top: 1px solid #f5f5f5;
      background: #fff;
      list-style: none;
      .menu-item {
        position: relative;
        flex: 1;
        color: #999;
        i {
          font-size: 24px;
          justify-content: center;
        }
        .dianzan-number {
          position: absolute;
          top: -10px;
          right: 8px;
          width: 24px;
          height: 14px;
          font-size: 12px;
        }
        .comments-number {
          position: absolute;
          top: 6px;
          right: 13px;
          width: 24px;
          height: 14px;
          line-height: 14px;
          border-radius: 4px;
          font-size: 12px;
          color: #ffffff;
          background-color: #028fd6;
        }
      }
      .dianzan-active {
        color: #2eb5ee;
      }
    }
  }

</style>
